<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>天气上传</title>
  <link rel="stylesheet" href="css/weui.min.css">
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>

<body style='background-color: #eee;'>
  <div class="weather_up-box">
    <!-- 头部 -->
    <div class="upload-hedaer">
      <div class="weather-pho">
        <input type="file" id="file2" accept="image/*" multiple onchange="imgChange2()" />
        <span>选择/拍摄天气图片</span>
      </div>
    </div>

    <!-- 内容部分 -->
    <section class="upload-section">
      <article class="upload-piclist">
        <div class="upload-file">
          <input type="file" id="file" name="uploadCsvFile" accept="image/*" multiple onchange="imgChange()" />
        </div>

        <!-- 当前地理位置 -->
        <p class='now-location'>所在位置: <span></span></p>
      </article>

      <!-- 天气情况列表 -->
      <ul class='weather-type'></ul>

      <!-- 天气情况细分 -->
      <div class='weather-type-detail'></div>

      <!-- 天气详情介绍 -->
      <div class="weater-type-weatherDes">

      </div>

      <!-- 文章部分 -->
      <article class="upload-article-text">
        <textarea placeholder="记录最美好瞬间，留下您最想说得话..." class="upload-textarea" name='upload-textarea'></textarea>
        <div class="submit">
          提交
        </div>
      </article>

    </section>

    <!-- footerTab -->
    <div class="ssv-footer">
      <!-- 首页 -->
      <div>
        <a href="social_server_view.html">
          <div class="ft-img">
            <svg class="icon" aria-hidden="true">
              <use xlink:href='#icon-shouye'></use>
            </svg>
          </div>
          <p>首页</p>
        </a>
      </div>
      <!-- 我的 -->
      <div>
        <a href="admin_center.html">
          <div class="ft-img">
            <svg class="icon" aria-hidden="true">
              <use xlink:href='#icon-wode'></use>
            </svg>
          </div>
          <p>我的</p>
        </a>
      </div>
    </div>
  </div>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  <script src="js/jweixin-1.6.0.js"></script>
  <script src="js/fzcommon.js"></script>
  <script src="js/iconfont.js"></script>
  <script src="js/weather_up.js"></script>
  <script>
    let picmax = 1;
    //图片改变方法
    function imgChange() {
      let file = document.getElementById('file').files;
      let imglist = document.querySelectorAll('.upload-Picitem');
      let uploadfile = document.getElementsByClassName('upload-file')[0]
      let piclist = document.getElementsByClassName('upload-piclist')[0];
      let filelist = file.length + imglist.length > picmax ? 1 - imglist.length : file.length + imglist.length;
      if (file.length + imglist.length >= 1) {
        uploadfile.style.display = "none"
      }
      for (let i = 0; i < filelist; i++) {
        readerfile(file[i]).then(e => {
          let html = document.createElement('div');
          html.className = 'upload-Picitem'
          html.innerHTML = '<img src=' + e +
            ' alt="pic"><span class= "delete-Picitem" onclick="deleteImg(event)"></span>'
          uploadfile.before(html);
        })
      }
    }


    function imgChange2() {
      let file = document.getElementById('file2').files;
      let imglist = document.querySelectorAll('.upload-Picitem');
      let uploadfile = document.getElementsByClassName('upload-file')[0]
      let piclist = document.getElementsByClassName('upload-piclist')[0];
      let filelist = file.length + imglist.length > picmax ? 1 - imglist.length : file.length + imglist.length;
      if (file.length + imglist.length >= 1) {
        uploadfile.style.display = "none"
      }
      for (let i = 0; i < filelist; i++) {
        // <span class='delete-Picitem'></span>
        readerfile(file[i]).then(e => {
          let html = document.createElement('div');
          html.className = 'upload-Picitem'
          html.innerHTML = '<img src=' + e +
            ' alt="pic"><span class= "delete-Picitem" onclick="deleteImg(event)"></span>'
          //挂在父节点
          uploadfile.before(html);
        })
      }
    }

    // 阅读文件方法
    function readerfile(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.addEventListener("load", function () {
          resolve(reader.result);
        }, false)
        if (file) {
          reader.readAsDataURL(file)
        }
      })
    }

    // 删除当前节点
    function deleteImg(e) {
      let uploadfile = document.getElementsByClassName('upload-file')[0]
      $(e.currentTarget.parentElement).remove()
      uploadfile.style.display = "block"
    }
  </script>
</body>

</html>